<template>
	<view class='page'>

		<view class='card'>
			<image class='card-img' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/tab_my/card-back.jpg'></image>
			<image class='address-card-wx' :data-id="userInfo.id" :data-name="userInfo.name" @tap='bindEwm' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/tab_my/card-wx.png'></image>
			<view class='card-block'>
				<view class='card-block-head'>
					<view class='card-block-head-top'>
						<image class='block-head-img' :src="userInfo.newAvatarUrl||userInfo.avatarUrl||defaultAvatar"></image>
						<view class='block-head-user'>
							<view class='block-head-user-name'>
								<view class='block-head-user-name-title'>{{userInfo.name}}</view>
								<view class='user-level-img'>
									<block v-for="(item,index) in starLevel">
										<image class="icon-star" v-if="item" src="/static/images/user-center/star-light.png"></image>
										<image class="icon-star" v-else src="/static/images/user-center/star-dark.png"></image>
									</block>
								</view>
							</view>
							<view class='block-head-user-workCategory'>
								<text v-if="userInfo.workCategory.name">{{userInfo.workCategory.name}}</text>
								<text v-if="userInfo.secondary.name">{{userInfo.secondary.name}}</text>
							</view>
						</view>
					</view>
					<view class='card-block-head-address'>
						<image class='address-card-host' mode='scaleToFill' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/small_img/weizhi.png'></image>
						<text class='address-card-name'>{{userInfo.address}}</text>
					</view>
				</view>
				<view class='card-block-brief-intr' v-if="userInfo.introduction">{{userInfo.introduction}}</view>
			</view>

		</view>

		<view class='card-line-btn'>
			<view class='line-btn-tel' :data-mobile="userInfo.mobile" :data-workCategory="userInfo.workCategory.name"
			 :data-name="userInfo.name" @tap='photo' :data-id="userInfo.id" >
			 <!-- :data-free="free" -->
				<image src='/static/images/tel.gif'></image>
				拨打电话
			</view>
			<view class='line-btn-collect' @tap='collect' :data-id="userInfo.id">
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/collect-000.jpg'></image>
				<text v-if="userInfo.status ==2">取消</text>
				<text v-if="userInfo.status == 1">收藏</text>
			</view>
			<button class='line-btn-card' open-type='share' @tap='openWxShare'>
				<image mode='scaleToFill' src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/store-000.png'></image>
				分享名片
			</button>
		</view>

		<view class='card-case' v-if="userInfo.poster.length">
			<view class='card-case-title'>案列展示</view>
			<view class='card-case-list'>
				<view class='card-case-list-item' v-for="(item,index) in userInfo.poster">
					<image class='card-case-img' @tap='previewImage' :id="item" :src="item"></image>
				</view>
			</view>
		</view>

		<view class='ewm'>
			<view class='ewm-back'>
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/tab_my/card-ewm.png'></image>
			</view>
			<image class='ewm-main' :src="code" @tap='preview' :data-code="code"></image>
		</view>
		<view class='longpress'>
			点击放大>长按识别>进入我的同城共享装修
		</view>

	</view>
</template>

<script>
	import app from '../../../../App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '../../../../utils/gyzjModel.js'
	export default {
		data() {
			return {
				code: "",
				starLevel: [],
				id: '',
				jobId: '',
				options: '',
				userInfo: '',
				free:'false',
			}
		},
		onLoad(options) {
			console.log('onload的开始');
			/*追加自己邀请进来的人免费拨打电话*/
			let free=options.free;
			if(free=='my-invite-list'){
			  this.free=true;
			}
			console.log('free的值',this.free);
			var id, jobId;
			if (options) {
				var scene = decodeURIComponent(options.scene);
				console.log('scene是什么' + scene);
				if (scene != "undefined") {
					id = scene;
				};

				if (options.id) {
					id = options.id;
					console.log('id的值a', id);
					this.getInfoDetails(id);
					this.id = id;
				}
				console.log('进来的jobId' + options.jobId);
				//加入工作id
				if (options.jobId) {
					jobId = options.jobId;
					this.getJobInfoDetails(id, jobId);
					this.jobId=jobId;
				}
			}
			// this.getEwmCode(id);
		},
		methods: {
			//分享到微信
			openWxShare:function(){
				// #ifdef APP-PLUS
				var arr=this.main_getGlobal();
				
				console.log('arr准备提交的值a',arr);
				this.main_is_login(arr);
				/*这里需要统一返回false,因为全局里面的跳转没有生效*/
				if(arr.token=='0739'){
					return false;
				}
				// return ;
				// plus.runtime.openURL(this.app_link_url, function(res) {
				// 	console.log(res);  
				// });  
				//跳转qq的处理
				// let _this = this;  
				// // 判断平台  
				// if (plus.os.name == 'Android') {  
				// 	plus.runtime.launchApplication(  
				// 		{  
				// 			pname: 'com.tencent.mobileqq'  
				// 			// pname: '__UNI__87A5878'  
				// 		},  
				// 		function(e) {  
				// 			console.log('Open system default browser failed: ' + e.message);  
				// 		}  
				// 	);  
				// } else if (plus.os.name == 'iOS') {  
				// 	plus.runtime.launchApplication({ action: 'taobao://' }, function(e) {  
				// 		console.log('Open system default browser failed: ' + e.message);  
				// 	});  
				// }  
				// #ifdef APP-PLUS
				let wx_id=this.main_config_wx_id;
				console.log('wx_id的值',wx_id);
				var userInfo=this.userInfo;
				console.log('userInfo',userInfo);
				let imageUrl=userInfo.avatarUrl?userInfo.avatarUrl:'/static/allAvatar.png';
				let title='名片分享:'+userInfo.nickName;
				let path='pages/user-center/my-info/cardcase/cardcase?id='+userInfo.id;
				gyzjModel.prototype.shareLink(title,imageUrl,wx_id,path);
				// #endif
				// #endif
			},
			//点击放大图片
			previewImage: function(e) {
				console.log('点击了这个图片',e);
				uni.previewImage({
					current: e.currentTarget.id, // 当前显示图片的http链接
					urls: this.userInfo.poster // 需要预览的图片http链接列表
				});
			},
			// 用户收藏接口
			collect: function(e) {
				let id = e.currentTarget.dataset.id;
				let arr = this.main_getGlobal();
				this.main_is_login(arr);
				if(arr.token=='0739'){
					return false;
				}
				gyzjModel.prototype.collectCard(id, arr.token,arr.type).then((res) => {
					if (res.code == 1) {
						
						if (this.userInfo.status == '2') {
							uni.showToast({
								title: '取消成功',
								icon: 'success'
							})
							this.userInfo.status = '1';
							this.setData({
								userInfo: this.userInfo
							})
							uni.hideLoading();
						} else {
							uni.showToast({
								title: '收藏成功',
								icon: 'success'
							})
							this.userInfo.status = '2';
							this.userInfo = this.userInfo;
							uni.hideLoading();
						}

					}
				}).catch(err => {
					console.log(err);
				})
			},

			getInfoDetails: function(id) {
				console.log('我的天');
				//获取工人详情
				gyzjModel.prototype.getWorkerDetail(id).then(data => {
					switch (data.code) {
						case 1:
							data = data.data;
							console.log('执行了用户获取', data);
							var starLevel = gyzjModel.prototype.convertToStarsArray(data.score_level);
							data.name = data.name.slice(0, 8);
							console.log(data.name);
							this.userInfo = data;
							this.id = data.id;
							this.starLevel = starLevel;
							break;
						default:
							uni.showToast({
								title: data.message,
								icon: 'none'
							});
							break;
					}
					uni.hideLoading();
				});
			},
			//获取工人详情，带jobId
			getJobInfoDetails: function(id, jobId) {
				console.log('带工人jobId进来');
				console.log(jobId + '---' + id);
				gyzjModel.prototype.getJobWorkerDetail(id,jobId).then(data => {
					switch (data.code) {
						case 1:
							data = data.data;
							console.log(data);
							console.log('带jobId的data的值');
							console.log(jobId);
							var starLevel = gyzjModel.prototype.convertToStarsArray(data.score_level);
							data.name = data.name.slice(0, 8);
							this.userInfo = data,
								this.id = data.id,
								this.starLevel = starLevel;
							// this.setData({
							// 	userInfo: data,
							// 	id: data.id,
							// 	starLevel
							// });
							uni.hideLoading();
							break;
						default:
						uni.showToast({
							title: data.message,
							icon: 'none'
						});
						uni.hideLoading();
							break;
					}
				});
			},


			getEwmCode: function(id) {

				merchantModel.indexEwmCode(id).then((res) => {
					if (res.code == 1) {
						var array = uni.base64ToArrayBuffer(res.data);
						var base64 = uni.arrayBufferToBase64(array);
						this.base64 = base64;
						this.code = "data:image/png;base64," + base64;
					}
				})
			},

			photo: function(e) {
				console.log('拨打电话');
				var arr=this.main_getGlobal();
				console.log('arr',arr);
				this.main_is_login(arr);
				/*这里需要统一返回false,因为全局里面的跳转没有生效*/
				if(arr.token=='0739'){
					return false;
				}
				const tel = e.currentTarget.dataset.mobile;
				const name = e.currentTarget.dataset.name;
				const free = e.currentTarget.dataset.free;
				const workCategory = e.currentTarget.dataset.workcategory;
				console.log('拨打电话1');
				// gyzjModel.prototype.goModelLogin();
				console.log('拨打电话1.5');
				if (workCategory) {
					var names = name + '-' + workCategory;
				} else {
					var names = name;
				}
				console.log('拨打电话2');
				var that = this;
				//原来的直接拨打电话
				if(free){
				  console.log('用户进来',tel);
				  if(tel!==null){
					console.log('用户手机号进来');
					uni.showActionSheet({
					  itemList: ['呼叫', '添加联系人'],
					  success: function (res) {
						if (res.tapIndex == 0) {//直接呼叫
						  uni.makePhoneCall({
							phoneNumber: tel,
							success: function (res_makephone) {
							}
						  })
						} else if (res.tapIndex == 1) {//添加联系人
						  uni.addPhoneContact({
							firstName: names,
							mobilePhoneNumber: tel,
							success: function (res_addphone) {
							}
						  })
						}
					  }
					})
					return;
				  }else{
					uni.showModal({
					  title: '该用户暂未填写手机号码',
					})
				  }
				  return ;
				}
				//现在的加入限制5次
				//加入postData的值
				let postData = {
					call_user_id: e.currentTarget.dataset.id
				}
				console.log(postData);
				uni.showActionSheet({
					itemList: ['呼叫', '添加联系人'],
					success: function(res_a) {
						uni.showLoading({
							title: '正在拨号中...',
						})
						if (res_a.tapIndex == 0) {
							//执行公共的方法
							that.callWorker(postData, arr.token,arr.type).then(res => {
								console.log('拨打电话的res的值',res);
								//直接呼叫
								uni.makePhoneCall({
									phoneNumber: tel,
									success: function(res_makephone) {}
								})
							});

						} else if (res_a.tapIndex == 1) {
							that.callWorker(postData, arr.token,arr.type).then(res => {
								console.log('添加联系人的res的值',res);
								//添加联系人
								uni.addPhoneContact({
									firstName: names,
									mobilePhoneNumber: tel,
									success: function(res_addphone) {}
								})
							});
						}
					}
				})
			},

			// 拨打电话的操作，一天拨打5次
			callWorker: function(postData, token,type) {
				return new Promise((resolve, reject) => {
					gyzjModel.prototype.callWorker(postData,token,type).then(data=> {
						switch (data.code) {
							case 1:
								uni.hideLoading();
								resolve(data);
								break;
							default:
								reject(data);
								uni.hideLoading();
								uni.showModal({
									content: data.message,
									showCancel: false,
									confirmColor: '#f94c48',
								})
								break;
						}
					});
				})
			},

			bindEwm: function(e) {
				let id = e.currentTarget.dataset.id;
				let name = e.currentTarget.dataset.name;
				uni.navigateTo({
					url: 'ewm/ewm?id=' + id + '&name=' + name,
				})
			},

			preview(e) {
				uni.previewImage({
					urls: [e.currentTarget.dataset.code],
				})
			}
		}
	}
</script>

<style>
	@import url("../../../../static/style/app.css");
	page {
		background-color: #fff;
	}

	.page {
		width: 100%;
	}

	.card {
		width: 100%;
		height: 520upx;
		position: relative;
	}

	.card-img {
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	.card-block {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 80%;
	}

	.block-head-img {
		width: 180upx;
		height: 180upx;
		border-radius: 50%;
		margin-right: 20upx;
	}

	.card-block-head {
		border-radius: 15upx;
		margin: 20upx 20upx 10upx 20upx;
		background-color: white;
		display: flex;
		padding: 10upx 20upx 20upx 25upx;
		flex-direction: column;

	}

	.card-block-head-top {
		display: flex;
		align-items: center;
		height: 230upx;
		width: 100%;
	}

	.block-head-user {
		width: 70%;
		color: #fff;
	}

	.block-head-user-name {
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 110upx;
		font-size: 36upx;
		font-weight: 600;
	}

	.block-head-user-name-title {
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		font-size: 36upx;
		color: black;

		/* text-overflow: ellipsis; */
	}

	.user-level-img {
		display: inline-block;
	}

	.icon-star {
		width: 36upx;
		height: 36upx;
	}

	.card-block-head-address {
		height: 100upx;
		display: flex;
		align-items: flex-end;
		color: black;
		font-size: 32upx;
	}

	.address-card-name {
		width: 90%;
		margin-right: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 1;
	}

	.address-card-host {
		width: 40upx;
		height: 40upx;
		margin-right: 20upx;
	}

	.address-card-wx {
		position: absolute;
		top: 40upx;
		right: 50upx;
		width: 80upx;
		height: 80upx;
		z-index: 9;
	}

	.block-head-user-workCategory text {
		border: 1px solid #FFB02D;
		display: inline-block;
		padding: 2upx 20upx;
		margin: 10upx 20upx 10upx 0;
		border-radius: 15upx;
		color: black;

	}

	/* 个人简介 */
	.card-block-brief {
		margin: 0 20upx;
		padding-bottom: 20upx;
	}

	.card-block-brief-head {
		height: 60upx;
		margin: 10upx 0;
		display: flex;
		align-items: center;
		color: #FFB02D;
	}

	.card-block-brief-img {
		width: 30upx;
		height: 40upx;
		margin-right: 20upx;
	}

	.card-block-brief-intr {
		/* width: 100%; */
		margin: 20upx 20upx 0;
		/* padding-bottom: 20upx; */
		color: #FFB02D;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/* 拨打电话 */
	.card-line-btn {
		padding: 20upx;
		display: flex;
	}

	.line-btn-tel {
		width: 35%;
		height: 58upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 5upx;
		background-color: #FFB02D;
		border: 1px solid #FFB02D;
		color: #fff;
		margin-right: 2%;
	}

	.line-btn-tel image {
		width: 40upx;
		height: 40upx;
		margin-right: 20upx;
	}

	.line-btn-card {
		width: 35%;
		height: 60upx;
		line-height: 60upx;
		padding: 0;
		border-radius: 5upx;
		border: 1px solid #000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.line-btn-card image {
		width: 40upx;
		height: 40upx;
		margin-right: 20upx;
	}

	.line-btn-collect {
		width: 26%;
		height: 56upx;
		margin-right: 2%;
		border: 1px solid #000;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 5upx;
	}

	.line-btn-collect image {
		width: 32upx;
		height: 32upx;
		margin-right: 20upx;
	}

	.card-case {
		padding: 20upx;
		background-color: #fff;
	}

	.card-case-title {
		margin: 10upx 0;
	}

	.card-case-list {
		display: flex;
		flex-wrap: wrap;
	}

	.card-case-list-item {
		width: 33%;
		height: 210upx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		margin-right: 0.5%;
		margin-bottom: 20upx;
	}

	.card-case-list-item:nth-child(1n) {
		justify-content: left;
	}

	.card-case-list-item:nth-child(3n) {
		margin-right: 0;
	}

	.card-case-img {
		width: 210upx;
		height: 210upx;
		border-radius: 10upx;
	}

	.ewm {
		width: 100%;
		height: 500upx;
		position: relative;
	}

	.ewm-back {
		width: 100%;
		height: 100%;
	}

	.ewm-back image {
		width: 100%;
		height: 100%;
	}

	.ewm-main {
		position: absolute;
		top: 14%;
		left: 23%;
		width: 50%;
		height: 70%;
		border-radius: 50%;
	}

	.longpress {
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}
</style>
